<script setup>
import { ref } from "vue";
import { uniFetch } from '../../api/uni-fetch';
import OrderIteam from "./components/OrderIteam.vue";
import { onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { onShareAppMessage } from "@dcloudio/uni-app";

onShareAppMessage(() => {
  return {
    titlt: "智能售卖机-订单",
    path: "/subpkg/orderList/orderList",
  };
});

const totalCount = ref([0, 0, 0, 0]);
const page = ref([1, 1, 1, 1]);
const params = ref([
  { pay_status: null },
  { isPay: 0 },
  { isPay: 1 },
  { isRefund: 1 },
]);

onLoad(() => {
  if (props.index) {
    tabIndex.value = props.index;
    console.log("onlaod");
  } else {
    tabIndex.value = 0;
  }
  tabMetas.value[tabIndex.value].rendered = true;
  getList(tabIndex.value);
});

onShow(() => {
  uni.setNavigationBarColor({
    frontColor: '#000000',
    backgroundColor: "#ffffff",
  });
});

// 标签页索引
const tabIndex = ref(null);
const props = defineProps({
  index: String,
});
console.log(props.index, "tab-index");

// 切换 Tab 标签页
const tabMetas = ref([
  {
    title: "全部订单",
    rendered: true,
  },
  {
    title: "结算中",
    rendered: false,
  },
  {
    title: "已结算",
    rendered: false,
  },
  {
    title: "售后/退款",
    rendered: false,
  },
]);

const list = ref([{ list: [] }, { list: [] }, { list: [] }, { list: [] }]);
const onTabChange = (index = 0) => {
  tabMetas.value[index].rendered = true;
  tabIndex.value = index;
  if (!list.value[index].list.length) {
    getList(index);
  }
};

onPullDownRefresh(async () => {
  console.log("shuaxi");
  page.value[tabIndex.value] = 1;
  list.value[tabIndex.value].list = [];
  await getList(tabIndex.value);
  uni.stopPullDownRefresh();
});

// 获取订单列表
async function getList(index = 0) {
  const res = await uniFetch.post("/order/list", {
    app_id: uni.appId,
    page: page.value[index],
    pageSize: 10,
    ...params.value[index],
  });
  console.log(res, "orderList==>全部", index);
  totalCount.value[index] = res.data.total;
  list.value[index].list.push(...res.data.list);
}

onReachBottom(() => {
  if (
    totalCount.value[tabIndex.value] > list.value[tabIndex.value].list.length
  ) {
    page.value[tabIndex.value]++;
    getList(tabIndex.value);
  }
});
</script>

<template>
  <view class="page-container">
    <view class="task-tabbar">
      <text
        v-for="(tabMeta, index) in tabMetas"
        :key="tabMeta.title"
        @click="onTabChange(index)"
        :class="{ active: tabIndex == index }"
        class="tab"
      >
        {{ tabMeta.title }}
      </text>
    </view>
    <view v-if="tabMetas[0].rendered" v-show="tabIndex == 0" class="task-list">
      <OrderIteam :orderList="list[0].list"></OrderIteam>
    </view>
    <view v-if="tabMetas[1].rendered" v-show="tabIndex == 1" class="task-list">
      <OrderIteam :orderList="list[1].list"></OrderIteam>
    </view>
    <view v-if="tabMetas[2].rendered" v-show="tabIndex == 2" class="task-list">
      <OrderIteam :orderList="list[2].list"></OrderIteam>
    </view>
    <view v-if="tabMetas[3].rendered" v-show="tabIndex == 3" class="task-list">
      <OrderIteam :orderList="list[3].list" :isRefund="1"></OrderIteam>
    </view>
    <ws-wx-privacy id="privacy-popup"></ws-wx-privacy>
  </view>
</template>

<style lang="scss" scoped>
.page-container {
  display: flex;
  flex-direction: column;
  background-color: #f3f3f3;
  min-height: 100vh;

  .goLogin {
    margin: 400rpx auto;
    width: 50%;
    line-height: 72rpx;
    height: 72rpx;
    font-size: 28rpx;
    text-align: center;
    color: #fff;
    border-radius: 50rpx;
    background-color: #197e25;
  }
}

.task-tabbar {
  height: 95rpx;
  position: fixed;
  z-index: 3;
  width: 100%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  font-size: 29rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #eee;
  color: #6c7173;

  .tab {
    height: 100%;
    line-height: 95rpx;
    z-index: 99;
  }

  .active {
    position: relative;
    z-index: 99;
    padding: 0 20rpx;
    color: #000;
    font-weight: 500;
    &::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0rpx;
      width: 56rpx;
      height: 8rpx;
      border-radius: 8rpx;
      transform: translate(-50%);
      background-color: #3770da;
    }
  }
}

.task-list {
  flex: 1;
  overflow: hidden;
  margin-top: 100rpx;

  .task-card {
    padding: 24rpx 30rpx 0;
    background-color: #fff;
    border-radius: 16rpx;
    margin: 15rpx 30rpx 30rpx;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .no {
    font-size: 26rpx;
    color: red;
    font-weight: 500;
  }

  .status {
    padding: 5rpx 20rpx 3rpx;
    font-size: 24rpx;
    color: green;
    border: 2rpx solid green;
    border-radius: 60rpx;
  }

  .body {
    padding: 40rpx 0;
    border-bottom: 1rpx solid #f4f4f4;
  }

  .timeline {
    border-left: 2rpx dashed #f4f4f4;
    margin-left: 30rpx;
    padding: 0 30rpx;
    position: relative;

    &::before,
    &::after {
      position: absolute;
      left: -24rpx;
      width: 44rpx;
      height: 44rpx;
      text-align: center;
      line-height: 44rpx;
      font-size: 24rpx;
      color: #fff;
      border-radius: 50%;
      background-color: pink;
    }

    &::before {
      content: "起";
      top: -1rpx;
      background-color: green;
    }

    &::after {
      content: "止";
      bottom: -1rpx;
      background-color: green;
    }
  }

  .line {
    font-size: 25rpx;
    color: green;
    margin-top: 30rpx;

    &:first-child {
      margin-top: 0;
    }
  }

  .footer {
    padding: 20rpx 0;
    position: relative;

    &.flex {
      display: flex;
    }
  }

  .label,
  .time {
    font-size: 25rpx;
    margin-right: 15rpx;
    color: green;
  }

  .action {
    position: absolute;
    right: 0;
    top: 50%;
    display: flex;
    align-items: center;
    height: 64rpx;
    padding: 0 40rpx;
    background-color: green;
    color: #fff;
    font-size: 25rpx;
    border-radius: 64rpx;
    transform: translate(0, -50%);

    &[disabled],
    &.disabled {
      background-color: #fadcd9;
    }
  }
}

.task-search {
  padding: 30rpx;
  // margin-top: -1rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;

  .search-bar {
    position: relative;

    .icon-search {
      position: absolute;
      top: 22rpx;
      left: 24rpx;
      color: green;
      font-size: 25rpx;
    }

    .input {
      height: 72rpx;
      background-color: #f4f4f4;
      border-radius: 72rpx;
      padding-left: 72rpx;
      font-size: 25rpx;
    }
  }

  .filter-bar {
    display: flex;
    margin-top: 30rpx;
    font-size: 25rpx;
    text-align: center;
    line-height: 64rpx;
    color: green;

    .picker {
      width: 230rpx;
      height: 64rpx;
      border-radius: 64rpx;
      background-color: green;
    }

    .text {
      margin: 0 24rpx;
    }

    .button {
      width: 120rpx;
      height: 64rpx;
      padding: 0;
      margin-left: 40rpx;
      line-height: 64rpx;
      border-radius: 64rpx;
      font-size: 25rpx;
      color: #fff;
      background-color: green;

      &[disabled] {
        background-color: #fadcd9;
      }
    }
  }
}

.task-blank {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 201rpx;
  text-align: center;
  padding-top: 130rpx;
  background-image: url(https://sl-driver.oss-cn-hangzhou.aliyuncs.com/images/blank%402x.png);
  background-size: contain;
  background-repeat: no-repeat;
  font-size: 24rpx;
  color: green;
  transform: translate(-50%, -100%);
}
</style>
